<!-- 结算单详情--待开票 -->
<template>
  <div class="invoice-detail">
    <el-container class="details-box">
      <div class="top-line">
        <el-button
          type="primary"
          @click="handleManual"
          class="headBtn"
          size="small" >
          <i class="el-icon-edit-outline"/>
          手动关联发</el-button>
        <el-button
          type="primary"
          @click="handleScan"
          class="headBtn"
          size="small" >
          <i class="el-icon-money"/>
          扫码关联发</el-button>
      </div>
      <h3>订单信息</h3>
      <!-- 列表 -->
      <el-header height="auto">
        <div class="formToptext">
          <el-form
            :inline="true"
            :model="formdata"
            ref="ruleForm"
            label-width="150px" >
            <el-form-item
              v-for="(item,index) in detailsDetailForm"
              :key="index"
              :label="item.title">
              <div
                v-if="item.key === 'orderStatus'"
                class="textBox">：{{ status[formdata[item.key]] }}
              </div>
              <div
                v-else
                class="textBox">：{{ formdata[item.key] }}</div>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <h3>产品明细</h3>
      <!-- 产品明细列表模块 -->
      <el-editable
        class="hospital-edit-box"
        :data="getList"
        height="200"
        v-loading="tableLoading"
        :columns="detailsTableColumns"
      />
      <el-dialog
        width="30%"
        title="关联发票"
        :visible.sync="showVisible"
      >
        <el-form
          :rules="typeRules"
          ref="dialogRef"
          :model="dialogData">
          <el-form-item
            label="发票抬头"
            prop="billTitle"
          >
            <el-input
              placeholder="请输入"
              clearable
              v-model.trim="dialogData.billTitle" />
          </el-form-item>
          <el-form-item
            label="发票金额"
            prop="billMoney"
          >
            <el-input
              placeholder="请输入"
              clearable
              v-model.number="dialogData.billMoney" />
          </el-form-item>
          <el-form-item
            label="发票代码"
            prop="billCode"
          >
            <el-input
              placeholder="请输入"
              clearable
              v-model.trim="dialogData.billCode" />
          </el-form-item>
          <el-form-item
            label="发票编码"
            prop="billNumber"
          >
            <el-input
              placeholder="请输入"
              clearable
              v-model.trim="dialogData.billNumber" />
          </el-form-item>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer">
          <el-button @click="dialogCancle">
            <i class="el-icon-circle-close"/>
            取 消</el-button>
          <el-button
            type="primary"
            @click="dialogSure">
            <i class="el-icon-circle-check"/>
            确 定</el-button>
        </div>
      </el-dialog>
      <!-- 分页模块 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
      />
    </el-container>
  </div>
</template>

<script>
import {
  getBySettleDistributor,
  getBySettleDistributorOrder,
  addSettleOrderBill,
  getScWarehouseEntryRead
} from '@const/beforeSettleApi'
import { detailsTableColumns, detailsDetailForm } from './const'
import SearchForm from '@components/businesscomponents/search'
import { hasIn, chunk } from 'lodash'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
// import { getScWarehouseEntryRead } from '@const/api'
import ElEditable from '@components/el-editable'

export default {
  components: { ElEditable, SearchForm },
  data () {
    return {
      // 表格Loading
      tableLoading: false,
      // 产品明细表头
      detailsTableColumns,
      // 产品明细表格数据
      getList: [],
      // 表单编辑默认值
      formdata: {},
      // 表单 详情展示内容-table
      detailsDetailForm,
      // 弹窗可视
      showVisible: false,

      // 弹窗数据
      dialogData: {
        billTitle: '',
        billMoney: '',
        billCode: '',
        billNumber: ''
      },
      // 订单状态
      status: {
        1: '待开票',
        2: '待收款',
        3: '已收款'
      },

      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0, // 总共的条数
      typeRules: {
        billTitle: [
          { required: true, message: '请输入发票抬头', trigger: 'blur' }
        ],
        billMoney: [
          { required: true, message: '请输入发票金额', trigger: 'blur', type: 'number' }
        ],
        billCode: [
          { required: true, message: '请输入发票代码', trigger: 'blur' }
        ],
        billNumber: [
          { required: true, message: '请输入发票编号', trigger: 'blur' }
        ]
      }
    }
  },

  mounted () {
    this.list()
    this.getHeadInfo()
    let arr = [
      { type: 'button', val: '返回', handle: this.back }
    ]
    const btn = {
      type: 'btn',
      arr: arr
    }
    this.$store.commit('changeLayoutHandle', btn)
  },
  methods: {
    // 点击返回
    back () {
      this.$router.go(-1)
    },

    // 查看发票详情
    lookDetail (val) {

    },

    // 扫码关联发
    handleScan () {

    },

    // 手动关联发
    handleManual () {
      this.showVisible = true
    },

    // 获取产品明细列表
    list () {
      this.$axios({
        method: 'post',
        // url: 'http://47.110.130.245:3000/mock/155/guoke-deepexi-order-center/api/v1/beforeSettle/SettleDistributor/getBySettleDistributor',
        url: getBySettleDistributor,
        data: {
          settleOrderCode: this.$route.query.settleOrderCode,
          orderStatus: this.$route.query.orderStatus,
          page: this.curPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        let result = hasIn(res, ['data', 'payload']) ? res.data.payload : []
        this.totalElements = result.totalElements
        this.getList = result.content
      })
    },

    // 获取头部信息
    getHeadInfo () {
      this.$axios({
        method: 'post',
        // url: 'http://47.110.130.245:3000/mock/155/guoke-deepexi-order-center/api/v1/beforeSettle/SettleDistributor/getBySettleDistributorOrder',
        url: getBySettleDistributorOrder,
        data: {
          settleOrderCode: this.$route.query.settleOrderCode
        }
      }).then(res => {
        let result = hasIn(res, ['data', 'payload']) ? res.data.payload : []
        this.formdata = result[0]
      })
    },

    // 弹窗取消按钮
    dialogCancle () {
      this.showVisible = false
      this.$refs['dialogRef'].resetFields() // 重置数据
      this.$refs['dialogRef'].clearValidate() // 重置验证
    },

    // 弹窗确定
    dialogSure () {
      this.$refs['dialogRef'].validate(valid => {
        if (valid) {
          this.$axios({
            method: 'post',
            // url: 'http://47.110.130.245:3000/mock/155/guoke-deepexi-order-center/api/v1/beforeSettle/SettleDistributor/addSettleOrderBill',
            url: addSettleOrderBill,
            data: {
              ...this.dialogData,
              settlePurchaserOrderId: this.formdata.settlePurchaserOrderId,
              distributorId: this.formdata.id
            }
          }).then(res => {
            this.$message({
              type: 'success',
              message: '关联成功'
            })
            this.$router.push('/distributorSide/settlementManagement/settleOrder')
            this.showVisible = false
            this.$refs['dialogRef'].resetFields() // 重置数据
            this.$refs['dialogRef'].clearValidate() // 重置验证
          })
        }
      })
    },

    // 页码更改
    handleSizeChange (size) {
      this.pageSize = size
      this.list()
    },

    // 切换不一样的页面,重置一切数据
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.list()
    }
  }
}
</script>

<style lang="less">
.details-box {
  height: 100%;
  overflow: auto;

  .top-line {
    width: 100%;

    .headBtn {
      float: right;
      border-radius: 5px;
      margin-right: 10px;
    }
  }

  .pagination {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    padding-right: 0;
  }

  .formToptext {
    margin-bottom: 20px;

    .el-form-item {
      margin-right: 16px;
      margin-bottom: 16px;

      .textBox {
        width: 220px;
      }
    }

    .el-form-item__label {
      padding-right: 10px;
    }
  }
}
</style>
